<!DOCTYPE html>
<html lang="en-US">
<head>
	<script src="../deps/raphael-min.js"></script>	
	<script type="text/javascript" src="fonts/my-underwood.cufonfonts.js"></script>
	<script type="text/javascript" src="fonts/Acquaintance_400.font.js"></script>
	
	<title>Raphael markup test 1</title>
</head>

<body>

<!--  <h1 id="qunit-header">QUnit raphael markup tests</h1> -->
<!--  <h2 id="qunit-banner"></h2> -->
<!--  <div id="qunit-testrunner-toolbar"></div> -->
<!--  <h2 id="qunit-userAgent"></h2> -->
<!--  <ol id="qunit-tests"></ol> -->
<!--  <div id="qunit-fixture">test markup, will be hidden</div> -->
 

<script type="text/javascript">		    

(function() {
	/**
	 * do the job of putting all letters in a set returned bu printLetters in a path
	 * @param p - can be a rpahael path obejct or string
	 */
	var _printOnPath = function(text, paper, p) {
		if(typeof(p)=="string")
			p = paper.path(p).attr({stroke: "none"});
		for ( var i = 0; i < text.length; i++) {		
			var letter = text[i];
			var newP = p.getPointAtLength(letter.getBBox().x);
			var newTransformation = letter.transform()+
			 	"T"+(newP.x-letter.getBBox().x)+","+
		        (newP.y-letter.getBBox().y-letter.getBBox().height);		
			//also rotate the letter to correspond the path angle of derivative
		    newTransformation+="R"+
		        (newP.alpha<360 ? 180+newP.alpha : newP.alpha);
		    letter.transform(newTransformation);
		}
		text._rm_topathPath=p;
	};
	
	/** print letter by letter, and return the set of letters (paths), just like the old raphael print() method did. */
	Raphael.fn.printLetters = function(x, y, str, font, size, 
			letter_spacing, line_height, onpath) {
		letter_spacing=letter_spacing||size/1.5;
		line_height=line_height||size;
		this.setStart();
		var x_=x, y_=y;
		for ( var i = 0; i < str.length; i++) {
			if(str.charAt(i)!='\n') {
				var letter = this.print(x_,y_,str.charAt(i),font,size);
				x_+=letter_spacing;				
			}
			else {
				x_=x;
				y_+=line_height;
			}
		}
		var set = this.setFinish();
		if(onpath) {
			_printOnPath(set, this, onpath);
		}
		return set;
	};
	
})();


var r = Raphael(0, 0, 500, 500);
var path1 = "M 50 100 C 100 50 150 0 200 50" +
	" C 250 100 300 150 350 100" +
	" C 400 50 450 50 450 50";
var text1 = r.printLetters(20, 150, "habia una vez una vaca", 
		r.getFont("my underwood"), 30, null, null, path1).attr({
	fill : "red",
	stroke : "black"
});
text1.click(function(evt){
	text1.animate({transform: "...r150s2,2"}, 3000);
});

var r = r.rect(300,300,40,60).attr({fill: "red"});
//for working with matrix, we need to add some non trivial transformation
r.transform("S1.01");
r.click(function(evt){
	// will rotate the rect, 45 degrees with rotation center evt.clientX, evt.clientY
	var m2 = r.matrix.clone();
	m2.rotate(45, evt.clientX, evt.clientY);
 	r.attr({"transform": m2.toTransformString()});
});
/**
 * @param text must be a print2() returned value (a set of paths, each for a letter)
 * @param path - a raphael path string or path object.
 */
_printonpath_do = function(text, paper, p) {
	if(typeof(p)=="string")
		p = paper.path(p).attr({stroke: "none"});
	for ( var i = 0; i < text.length; i++) {		
		var letter = text[i];
		var newP = p.getPointAtLength(letter.getBBox().x);
		var newTransformation = letter.transform()+
		 	"T"+(newP.x-letter.getBBox().x)+","+
	        (newP.y-letter.getBBox().y-letter.getBBox().height);		
		//also rotate the letter to correspond the path angle of derivative
	    newTransformation+="R"+
	        (newP.alpha<360 ? 180+newP.alpha : newP.alpha);
	    letter.transform(newTransformation);
	}
	text._rm_topathPath=p;
};
</script>

</body>
</html>